<template>
  <div class="home-container">
    <div class="back">
      <img
        :src="h5HomeIcon"
        @click="handleBackPressed"
        class="back-arrow"
        alt=""
      />
    </div>
    <div class="header">
      <img :src="logo" class="logo" alt="" />
      <div class="title" v-if="showTest">-</div>
    </div>
    <div class="search">
      <SchoolSearchBox :showHistory="true" :showExtraBtn="true" />
    </div>

    <div class="main">
      <SchoolOverview :schoolList="schoolList" />
      <HotSchool :schoolList="schoolList" />
      <FavoriteSchool :list="favoritesList" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import {
  getPositionSalaryConfig,
  campusCollectColleges,
} from '@/api/collegeSearch';
import { onBackPressed } from '@/utils/androidFn.js';
import h5HomeIcon from '@/assets/images/home.png';
import logo from '@/assets/images/logo.png';

import { defineAsyncComponent } from 'vue';

const SchoolSearchBox = defineAsyncComponent(() =>
  import('@/components/SchoolSearchBox.vue')
);
const HotSchool = defineAsyncComponent(() =>
  import('./components/HotSchool.vue')
);
const SchoolOverview = defineAsyncComponent(() =>
  import('./components/SchoolOverview.vue')
);
const FavoriteSchool = defineAsyncComponent(() =>
  import('./components/FavoriteSchool.vue')
);

defineOptions({
  name: 'CollegeSearch',
});

const router = useRouter();

const schoolList = ref([]);
const getPositionSalaryConfigFn = async () => {
  const params = {
    ecCode: 'padHotCollege',
  };
  const res = await getPositionSalaryConfig(params);
  if (res.code == 200) {
    schoolList.value = JSON.parse(res.data.ecValue);
  }
};

const favoritesList = ref([]);
const campusCollectCollegesFn = async () => {
  const params = {
    pageNo: 1,
    pageSize: 10,
  };
  const res = await campusCollectColleges(params);
  if (res.code == 200) {
    favoritesList.value = res.data;
  }
};

const handleBackPressed = () => {
  onBackPressed(router);
};

const showTest = ref(false);
// 如果域名包含test，则显示测试文字
if (
  window.location.href.indexOf('test') !== -1 ||
  window.location.href.indexOf('localhost') !== -1
) {
  showTest.value = true;
}

onMounted(() => {
  getPositionSalaryConfigFn();
  campusCollectCollegesFn();
});
onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.home-container {
  background-image: url('@/assets/images/BackgroundHome.png');
  background-size: cover;
  padding: 0 60px 32px 60px;
  box-sizing: border-box;
  font-size: 20px;
  .icon {
    width: 24px;
    height: 24px;
  }
  .back {
    padding: 30px 0px;
    .back-arrow {
      width: 48px;
      height: 48px;
    }
  }
  .header {
    padding: 4px 0;
    margin-bottom: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo {
      width: 145px;
      height: 56px;
    }
  }

  .main {
    display: flex;
    justify-content: center;
    gap: 40px;
    height: calc(100vh - 473px);
  }
}
</style>
